<template>
	<view class="wrapper">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">个人中心</block>
		</cu-custom>

		<view class="content">
			<view class="box bg-gradual-blue">
				<button class="cu-btn round line-white lg" @click="toLogin" v-if="!LoginState">登录/注册</button>
				<view class="exit flex solid-bottom padding align-cente" v-else>
					<view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
					<button class="cu-btn round line-white" @click="exit">退出</button>
				</view>
			</view>
		</view>

		<view class="cu-list grid col-4">
			<view class="cu-item" v-for="(item,index) in list" :key="item">
				<view :class="[item.icon,'text-red']">
					<view class="cu-tag badge">
						<block>{{ item.num }}</block>
					</view>
				</view>
				<text>{{ item.title }}</text>
			</view>
		</view>

		<view class="cu-list menu sm-border  margin-top">
			<navigator class="cu-item arrow" hover-class="none" url="../personinfo/personinfo" open-type="navigate">
				<view class="content">
					<text class="cuIcon-peoplefill text-grey"></text>
					<text class="text-grey">个人信息</text>
				</view>
			</navigator>

			<navigator url="../order/order" open-type="navigate" class="cu-item arrow" hover-class="none">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">订单管理</text>
				</view>
			</navigator>

			<navigator class="cu-item arrow" hover-class="none" url="../setup/setup" open-type="navigate">
				<view class="cu-item arrow">
					<view class="content">
						<text class="cuIcon-settings text-grey"></text>
						<text class="text-grey">设置</text>
					</view>
				</view>
			</navigator>
		</view>

		<view class="cu-modal center-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					亲，确定退出吗
				</view>
				<view class="flex solid-bottom padding justify-around">
					<button class="cu-btn round bg-red " @click="sureExit">确定</button>
					<button class="cu-btn round bg-green " @click="cancelExit">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: '',
				userName: '',
				password: '',
				LoginState: false,
				list: [{
						title: '京豆',
						num: 2000,
						icon: 'cuIcon-game'
					},
					{
						title: '未收快递',
						num: 1,
						icon: 'cuIcon-deliver'
					},
					{
						title: '已收快递',
						num: 9,
						icon: 'cuIcon-goods'
					},
					{
						title: '余额',
						num: 88,
						icon: 'cuIcon-recharge'
					}
				]
			}
		},
		methods: {
			toLogin() {
				uni.redirectTo({
					url: "../Login/Login"
				})
			},
			exit: function() {
				this.modalName = "bottomModal";
			},
			sureExit: function() {
				uni.clearStorage();
				this.LoginState = false;
				this.modalName = "";
			},
			cancelExit: function() {
				this.modalName = "";
			},
			toPersonInfo: function() {
				uni.navigateTo({
					url: "../personinfo/personinfo"
				})
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'token',
				success: (res) => {
					if (res) {
						this.LoginState = true
					} else {
						this.LoginState = false
					}
				}
			})
		}
	}
</script>

<style scope>
	.wrapper {
		width: 100%;
		height: 100%;
	}

	.wrapper>.content {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.wrapper .content .box {
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #0081FF;
	}

	.wrapper .content .box .exit {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
</style>
